<#assign ctx = "${request.contextPath}">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>网页实时视频 - 示例</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${ctx}/lib/ckplayer/player.js"></script>
<style type="text/css">.player{width: 100%; height: 300px;}</style>
</head>
<body>
<div class="container">
<div class="row">
	<div class="col-xs-12 col-md-offset-3 col-md-6">
		<div id="player" class="player"></div>
	</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-offset-3 col-md-6">
<div class="panel panel-default">
   <div class="panel-body">
   <span id="error"></span>
   <form class="form-horizontal">
  		<div class="form-group">
			<div class="col-sm-4">
				<input id="devKey" type="text" class="form-control" placeholder="devKey" value="c02f13f7224249cbb95bc1452d6f6588"/>
			</div>
			<div class="col-sm-4">
				<input id="devSecret" type="text" class="form-control" placeholder="devSecret" value="44cb6aaf4ecc4a2ba3a09bbde2b43296"/>
			</div>
			<div class="col-sm-4">
				<input id="uuid" type="text" class="form-control" placeholder="uuid" value="357730090012676"/>
			</div>
  		</div>
  		<div class="form-group">
	  		<div class="col-sm-8">
				<input id="startCmd" type="text" class="form-control" placeholder="开始指令: start" value='{"cmd":256}'/>
			</div>
			<div class="col-sm-4">
				<button id="start" type="button" class="btn btn-primary">开始</button>
			</div>
  		</div>
  		<div class="form-group">
	  		<div class="col-sm-8">
				<input id="switchCameraCmd" type="text" class="form-control" placeholder="切换摄像头指令: switchcamera"/>
			</div>
			<div class="col-sm-4">
				<button id="switchCamera" type="button" class="btn btn-success">切换摄像头</button>
			</div>
  		</div>
  		<div class="form-group">
	  		<div class="col-sm-8">
				<input id="stopCmd" type="text" class="form-control" placeholder="停止指令: stop"/>
			</div>
			<div class="col-sm-4">
				<button id="stop" type="button" class="btn btn-danger">停止</button>
			</div>
  		</div>
   </form>
   </div>
</div>
</div>
</div>
</div>
<script>
var rtvHost = '${ctx}'; // 实时视频服务器主机地址
var appId = new Date().getTime(); // 客户端标识
function sendInstruction(cmd, isw){
	var url = rtvHost + '/api';
	var data = {ver:2, 'for':'web', method:'sendInstruction', cmd:cmd, isw:isw, proNo:128, appId:appId};
	data.devKey = $('#devKey').val();
	data.devSecret = $('#devSecret').val(); 
	data.uuid = $('#uuid').val();
	return $.ajax({url:url, data:data, dataType:'json'});
}
function errorHandler(e, obj){
	// 错误处理
	alert("播放器：" + obj.playerID + " 发生错误：" + e);
}
function createPlayer(containerId, videoUrl){
	var options = {id:containerId, source:videoUrl};
	// 配置语音,样式文件时, 需要在存放语音样式文件的web服务器根目录放置crossdomain.xml文件, 解决跨域问题
// 	options.languagePath = 'http://longmin.jimicloud.com/rtv-os/lib/ckplayer/language.xml';
// 	options.stylePath = 'http://longmin.jimicloud.com/rtv-os/lib/ckplayer/style.xml';
	new JIMIPlayer(options, function (player, id){
		player.addListener('error', errorHandler); // 事件处理函数必须为全局函数
	});
}
function start(){
	sendInstruction($('#startCmd').val(), 3).then(function (obj){
		if (0 == obj.code){
			var data = obj.data;
			createPlayer('player', data.pullURL + data.token);
			$('#error').html('');
		}else{
			$('#error').html('<div class="alert alert-danger"> ' + obj.msg + ' </div>');
		}
	});
}
function switchCamera(){
	sendInstruction($('#switchCameraCmd').val(), 0).then(function (obj){
		if (0 == obj.code){
			$('#error').html('');
		}else{
			$('#error').html('<div class="alert alert-danger"> ' + obj.msg + ' </div>');
		}
	});
}
function stop(){
	createPlayer('player');
	sendInstruction($('#stopCmd').val(), 0).then(function (obj){
		if (0 == obj.code){
			$('#error').html('');
		}else{
			$('#error').html('<div class="alert alert-danger"> ' + obj.msg + ' </div>');
		}
	});
}
$(function (){
// 	createPlayer('player', 'rtmp://live.hkstv.hk.lxdns.com/live/hks'); // 演示
	createPlayer('player'); // 空白占位视频
	$('#start').click(start);
	$('#switchCamera').click(switchCamera);
	$('#stop').click(stop);
});
</script>
</body>
</html>